import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { headLists, echartsData } from './dashboard.model';
import { NzNotificationService, NzMessageService } from 'ng-zorro-antd';
import { NoticeService } from '../services/notice/notice.service';
import { DashboardService } from '../services/dashboard/dashboard.service';
import { Utils, Lang, Status } from '../common/helper/util-helper';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(
    private router: Router,
    private notification: NzNotificationService,
    private noticeService: NoticeService,
    private dashboardService: DashboardService,
    public message: NzMessageService
  ) { }

  public headLists: any = headLists;
  public optionsTop: any;
  public optionsBottom: any;
  public notices: any = [];
  public isDetailsVisible: any = false;
  public appoint: any = {};
  public echartsData: any = echartsData;
  public echartsValueTop: any = [];
  public echartsValueBottom: any = [];
  public status = {
    // 当前页面所需要的企业权限
    pagePermissions: [
      // 日志
      'APJ.System.Logs',
      // 发布公告
      'APJ.System.Notices',
      // 部门管理
      'APJ.System.Organizations',
      // 角色管理
      'APJ.System.Role',
      // 人员管理
      'APJ.System.User',
    ],
    // 当前页面企业级权限状态
    pageAuthorty: {
      SystemLogs: null,
      SystemNotices: null,
      SystemOrganizations: null,
      SystemRole: null,
      SystemUser: null,
    },
  }


  /**
   * 初始化
   */
  public async init() {

    // 初始化企业级权限匹配

    this.status.pageAuthorty = Utils.grantedPermissions(
      this.status.pagePermissions,
      this.status.pageAuthorty,
      true
    )
    console.log(this.status.pageAuthorty);


    // getEchartsValue
    const result = await this.dashboardService.getEchartsValue({});
    // console.log(result)
    this.echartsData = Object.keys(result.result.check);
    this.echartsValueTop = Object.values(result.result.check);
    this.echartsValueBottom = Object.values(result.result.self);
    this.echartsTop();
    this.echartsBottom();
  }

  /**
   * 图表
   */
  public echartsTop() {
    let valueAdopt = [];
    let valueNoAdopt = [];
    this.echartsValueTop.forEach(el => {
      valueAdopt.push(el[0]);
      valueNoAdopt.push(el[1]);
    });

    this.optionsTop = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: this.echartsData
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            lineStyle: { color: '#eee' }    // x轴刻度的颜色
          },
        }
      ],
      series: [
        {
          name: '通过',
          type: 'bar',
          data: valueAdopt,
          itemStyle: {
            normal: {
              color: '#ea647c',
              lineStyle: {
                color: '#ea647c'
              }
            }
          }
        },
        {
          name: '未通过',
          type: 'bar',
          data: valueNoAdopt,
          itemStyle: {
            normal: {
              color: '#78bbec',
              lineStyle: {
                color: '#78bbec'
              }
            }
          }
        }
      ]
    };
  }

  public echartsBottom() {
    let valueAdopt = [];
    let valueNoAdopt = [];
    this.echartsValueBottom.forEach(el => {
      valueAdopt.push(el[0]);
      valueNoAdopt.push(el[1]);
    });

    this.optionsBottom = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: this.echartsData
        }
      ],
      yAxis: [
        {
          type: 'value',
          splitLine: {
            lineStyle: { color: '#eee' }    // x轴刻度的颜色
          },
        }
      ],
      series: [
        {
          name: '通过',
          type: 'bar',
          data: valueAdopt,
          itemStyle: {
            normal: {
              color: '#ea647c',
              lineStyle: {
                color: '#ea647c'
              }
            }
          }
        },
        {
          name: '未通过',
          type: 'bar',
          data: valueNoAdopt,
          itemStyle: {
            normal: {
              color: '#78bbec',
              lineStyle: {
                color: '#78bbec'
              }
            }
          }
        }
      ]
    };
  }

  /**
   * 公告 
   */
  public async getNotices() {
    const json = {
      maxResultCount: 9,
      skipCount: 0
    }
    const result = await this.noticeService.getNotices(json);
    this.notices = result.result.items;
    this.notices.forEach(el => {
      if (el.status === 1) el.style = { 'background-image': "url('./../../assets/images/nav/icon_news_gray.png')" };
    });
  }
  /**
   * 路由
   * @param route 
   */
  routerTo(route) {
    switch (route) {
      // 项目列表
      case 'project':
        this.router.navigate([`/outer/project-type`]);
        break;
      // 组织机构
      case 'oraganization':
        // 根据权限修改默认跳转路由
        // 如果组织机构中一个所有页面都没有
        // tslint:disable-next-line: max-line-length
        if (!this.status.pageAuthorty.SystemOrganizations && !this.status.pageAuthorty.SystemRole && !this.status.pageAuthorty.SystemUser && !this.status.pageAuthorty.SystemLogs) {
          this.message.warning('对不起，暂无访问权限')
        } else {
          let Croute;
          if (this.status.pageAuthorty.SystemOrganizations) {
            Croute = 'department';
          } else if (this.status.pageAuthorty.SystemRole) {
            Croute = 'role';
          } else if (this.status.pageAuthorty.SystemUser) {
            Croute = 'member';
          } else if (this.status.pageAuthorty.SystemLogs) {
            Croute = 'syslogs';
          }
          this.router.navigate(
            [`/inner/oraganization/${Croute}`],
            { queryParams: { info: 'organization' } }
          );
        }
        break;
      // 公告
      case 'notice':
        this.router.navigate([`/outer/notice`]);
        break;
      // 企业资料库
      case 'company':
        this.router.navigate(
          [`/outer/company-data`],
          { queryParams: { type: 1 } }
        );
        break;
      // 默认
      case '':
        this.notification.create('warning', '提示',
          '该功能暂未开通');
        break;
    }
  }


  /**
     * 详情请求
     * @param item 
     */
  public async details(item) {
    const result = await this.noticeService.noticeDetails(item.id);
    this.appoint = result.result;
    this.isDetailsVisible = true;
    // 标记为已读
    await this.noticeService.markRead([item.id]);
    this.getNotices();
  }


  // 查看公告详情

  show(data) {
    this.isDetailsVisible = true;
    console.log(data)
    this.details(data)
    // this.appoint = data;

  }
  handleCancel() {
    this.isDetailsVisible = false;
    this.appoint = {}
  }
  ngOnInit() {
    this.init();
    this.getNotices();
  }

}
